<template>
    <div class="login">
        
        <div class="loginBox" style="position:relative;">
			<h2 v-show="pass">登录</h2>
			<h2 v-show="newpass">忘记密码</h2>
			<div class="item" v-show="pass">
				<input type="E-Mail" name="email" required="" v-model="email" @input="ema()" ref="back">
				<label for="">邮箱</label>
			</div>
			<div class="item" v-show="pass">
				<input :type="type" name="password" required="" v-model="password" @input="paword()" ref="back">
				<label for="">密码</label>
				<a href="###" class="iconfont" style="color:#fff;position:absolute;left:90%;top:1rem;" v-show="!islook" @click="look()">&#xe6e0;</a>
				<a href="###" class="iconfont" style="color:#fff;position:absolute;left:90%;top:1rem;" v-show="islook" @click="look()">&#xe6e1;</a>
			</div>

			<div class="item" v-show="newpass">
				<input type="email" name="mails" v-model="mail" required="" ref="forget" @input="newema()">
				<label for="">邮箱</label>
			</div>

			<div class="item" v-show="newpass">
				<input :type="type1" name="words" v-model="word"required="" ref="forget" @input="newpaword()">
				<label for="">新密码</label>
				<a href="###" class="iconfont" style="color:#fff;position:absolute;left:90%;top:1rem;" v-show="!islook1" @click="look1()">&#xe6e0;</a>
				<a href="###" class="iconfont" style="color:#fff;position:absolute;left:90%;top:1rem;" v-show="islook1" @click="look1()">&#xe6e1;</a>
			</div>

			<div class="item" v-show="newpass"  style="width: 50%">
				<input type="text" name="codes" v-model="code"  ref="forget">
				<label for="">验证码</label>
				<span class="code" @click="get()">
				<a href="###" ref="eleCode" @click="codeTimer()">获取注册码</a>
					<span class="first"></span>
					<span class="second"></span>
					<span class="third"></span>
					<span class="fourth"></span>
				</span>
			</div>

			<a href="###" @click="register()" style="position: absolute;margin-left: 0%;margin-top:-1rem;" v-show="pass">还未注册？</a>
			<a href="###" @click="forget()" style="position: absolute;right: 1.3rem;margin-top: -1rem;" v-show="pass">忘记密码？</a>
			<p v-show="newpass"><a href="###" @click="back()">返回</a></p>
			
			<button class="btn" @click="login()" v-show="pass">登录
				<span class="first"></span>
				<span class="second"></span>
				<span class="third"></span>
				<span class="fourth"></span>
			</button>
			
			<button class="btn" @click="sure()" v-show="newpass">确认
			<span class="first"></span>
			<span class="second"></span>
			<span class="third"></span>
			<span class="fourth"></span>
			</button>
		
	</div>

	<div class="warn" v-show="show">
		{{this.warn}}
	</div>
	<div class="warn" v-show="notice">
		{{this.warn}}
	</div>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
export default {
	name: 'login',
	data () {
		return {
			type: 'password',
			islook: false,
			type1: 'password',
			islook1: false,
			email: '',
			password: '',
			show: false,
			pass: true,
			newpass: false,
			mail: '',
			word: '',
			code: '',
			warn: '',
			notice: false,
			warn: '',
			timer: '60',
		}
	},


	methods: {
		look () {
			if (this.islook) {
				this.type = "password"
				this.islook = !this.islook
			}
			else {
				this.type = "text"
				this.islook = !this.islook
			}
		},

		look1 () {
			if (this.islook1) {
				this.type1 = "password"
				this.islook1 = !this.islook1
			}
			else {
				this.type1 = "text"
				this.islook1 = !this.islook1
			}
		},

		login () {
			if (this.email == "" || this.password == "") {
				// alert("请填写完整信息")
				this.show = true
				this.warn = "请填写完整信息"
			}
			let postData = qs.stringify({
				email: this.email,
				password: this.password,
			})

			axios.post(`/api/user/login`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

				if (response.status === 200) {
					
					if (response.data === "用户名或密码错误") {
						this.show = true
						this.warn = "邮箱或密码错误"
					} else if (response.data === "登录成功") {
						// alert("登陆成功！")
						this.$router.go(-1)
						this.$message({
							type: 'success',
							message: "登录成功"
						})
					}
					// console.log(this.warn)
				}


			})
		},,

		ema () {
			this.show = false
			this.notice = false
		},

		paword () {
			this.show = false
			this.notice = false
		},

		register () {
			this.$router.push("/register")
		},

		forget () {
			this.pass= false
			this.newpass = true
			this.$refs.forget.setAttribute('required','true')
			this.$refs.back.removeAttribute('required')
			// this.$refs.back.setAttribute('required','false')
		},

		back () {
			this.pass = true
			this.newpass = false
			this.$refs.back.setAttribute('required','true')
			this.$refs.forget.removeAttribute('required')
			// this.$refs.forget.setAttribute('required','false')
		},

		get () {
			let postData = qs.stringify({
				email: this.mail,
			})

			axios.post(`/api/mail/sendEmail`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

				if (response.status === 200) {
					if (this.mail) {
						if (response.data === true) {
							this.warn = "验证码已发送"
							// alert("验证码已发送,请注意查收！")
							this.$message({
								type: 'success',
								message: "验证码已发送,请注意查收！"
							})
						} else {
							this.warn = "邮箱格式错误"
						}
						
					} else {
						this.warn = "请先填写邮箱"
					}
					this.notice = true
					// console.log(response.data)
				} 

			})
		},

		codeTimer() {
			// if (this.settime) {
				// this.timer = 60;
				// this.codeText = "获取验证码";
				let _this = this;//setTimeout里面的this不一样,所以在这里先保存好
				if (this.timer >= 1) {
				//this.$refs.eleCode是vue获取dom元素的一种方法
				this.$refs.eleCode.setAttribute("disabled", "true");//验证码倒计时开始后，不可再点击
				// this.$refs.eleCode.setAttribute("value", this.timer + "s 后获取");//点击后的文本
				this.$refs.eleCode.innerHTML = this.timer + "s 后获取"
				// this.$refs.eleCode.style.backgroundColor = "#fce0d2";//点击后颜色变淡
				this.timer--;
				// console.log(this.timer)
				setTimeout(function () {
					_this.codeTimer();
				}, 1000);
				} else {
				this.$refs.eleCode.innerHTML = "获取验证码"
				this.$refs.eleCode.removeAttribute("disabled");
				this.timer = 60;
				}
			// }
		},


		sure () {
			
			let postData = qs.stringify({
				email: this.mail,
				password: this.word,
				code: this.code,
			})

			axios.post(`/api/user/forgetPassword`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

				if (response.status === 200) {
					this.notice = true
					this.warn = response.data
						
					console.log(response.data)
					if (response.data === "密码修改成功") {
						this.pass = true
						this.newpass = false
						
						this.$message({
							type: 'success',
							message: "密码修改成功！"
						})
					} else {
						if (this.mail == "" || this.word == "" || this.code == "") {
							this.notice = true
							this.warn = "请填写完整信息"
						} else {
							this.warn = response.data
						}

					}
				} 

			}) 
		},

		newema () {
			this.notice = false
		},

		newpaword () {
			this.notice = false
		},
		
	},
}
</script>

<style lang="stylus" scoped>
.warn {
	position:absolute;
	top: 8rem;
	// background-color #fff
}
input,
button {
	background: transparent;
}

.login {
	height: 100vh;
	background: linear-gradient(#141e30,#243b55);
	display: flex; 
	// 以下两行居中
	justify-content: center;
	align-items: center;
	font-size: .9rem;
	color: #03e9f4;
}
.loginBox {
	width: 30%;
	background: rgba(0,0,0,.6);
	// 以下两行解决padding撑大盒子问题
	padding: 2rem;
	box-sizing: border-box;
	box-shadow: 2px 2px 2px rgba(0,0,0,.6);
	border-radius: 10px;
	margin-top 6rem
	// position: relative;
}
.loginBox h2 {
	text-align: center;
	color: #03e9f4;
	font-size: 1.3rem;
	margin-bottom: 2rem;
}
.item {
	height: 45px;
	border-bottom: 1px solid #fff;
	margin-bottom: 40px;
	position: relative;
	// background-color #fff
}
.item input {
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 1rem;
	padding-top: 20px;
	box-sizing: border-box;
	// background-color red

}
.item label {
	position: absolute;
	top: .75rem;
	left 0
	transition: all 0.4s linear;
	// background-color skyblue
}

// 实现点击input框，提示字体向上移动变小
.item input:focus+label,
.item input:valid+label {
	top: 0;
	font-size: .75rem;
	color: skyblue;
}

.btn {
	padding: .5rem 1rem;
	margin-top: 30px;
	font-size: .9rem;
	color: #03e9f4;
	position: relative;
	overflow: hidden;
	cursor:pointer;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-right: 30%;
}
.btn a {
	color: #03e9f4;
}
.btn:hover {
	background: #03e9f4;
	border-radius: 5px;
	color: #fff;
	box-shadow: 0 0 5px 0 #03e9f4,
				0 0 25px 0 #03e9f4,
				0 0 50px 0 #03e9f4,
				0 0 100px 0 #03e9f4;
}
.btn:hover a {
	color #fff
}
.btn span {
	position: absolute;
}
.btn .first {
	width: 100%;
	height: .1rem;
	background: -webkit-linear-gradient(left,transparent,#03e9f4);
	left: -100%;
	top: 0px;
	animation: line1 1s linear infinite;
}
@keyframes line1{
	50%,100% {
		left: 100%;
	}
}
.btn .second {
	width: 2px;
	height: 100%;
	background: -webkit-linear-gradient(top,transparent,#03e9f4);
	right: 0%;
	top: -100%;
	animation: line2 1s 0.25s linear infinite;
}
@keyframes line2{
	50%,100% {
		top: 100%;
	}
}
.btn .third {
	width: 100%;
	height: 2px;
	background: -webkit-linear-gradient(left,#03e9f4,transparent);
	left: 100%;
	bottom: 0;
	animation: line3 1s 0.5s linear infinite;
}
@keyframes line3{
	50%,100% {
		left: -100%;
	}
}
.btn .fourth {
	width: 2px;
	height: 100%;
	background: -webkit-linear-gradient(top,#03e9f4,transparent);
	left: 0px;
	top: 100%;
	animation: line4 1s 0.75s linear infinite;
}
@keyframes line4{
	50%,100% {
		top: -100%;
	}
}
.btn {
			margin-left: 40%;
		}
		.register {
			position: absolute;
			right: 20px;
			bottom: 22px;
		}
.code {
			width: auto;
			height: auto;
			position: absolute;
			overflow: hidden;
			right: -12.5rem;
			// left: 2rem;
			// right: 10%;
			bottom: 0;
		}
		.code a {
			line-height: 35px;
			// font-size: .8rem;
			color: #03e9f4;
		}
		.code a:hover {
			color: #fff;
		}
		.code span {
			position: absolute;
		}
		.code .first {
			width: 100%;
			height: 2px;
			background: -webkit-linear-gradient(left,transparent,#03e9f4);
			left: -100%;
			top: 0px;
			animation: line1 1s linear infinite;
		}
		@keyframes line1{
			50%,100% {
				left: 100%;
			}
		}
		.code .second {
			width: 2px;
			height: 100%;
			background: -webkit-linear-gradient(top,transparent,#03e9f4);
			right: 0%;
			top: -100%;
			animation: line2 1s 0.25s linear infinite;
		}
		@keyframes line2{
			50%,100% {
				top: 100%;
			}
		}
		.code .third {
			width: 100%;
			height: 2px;
			background: -webkit-linear-gradient(left,#03e9f4,transparent);
			left: 100%;
			bottom: 0;
			animation: line3 1s 0.5s linear infinite;
		}
		@keyframes line3{
			50%,100% {
				left: -100%;
			}
		}
		.code .fourth {
			width: 2px;
			height: 100%;
			background: -webkit-linear-gradient(top,#03e9f4,transparent);
			left: 0px;
			top: 100%;
			animation: line4 1s 0.75s linear infinite;
		}
		@keyframes line4{
			50%,100% {
				top: -100%;
			}
		}
</style>